<!-- 

1 监听的不是响应式数据（最常见！）
watchEffect 只能监听通过 reactive(), ref(), computed() 等 Vue API 创建的响应式数据。

❌ 错误：监听普通对象
const normalObj = { count: 0 };
watchEffect(() => {
  console.log(normalObj.count); // 不会触发更新
});
normalObj.count = 1; // 普通对象的修改不会触发 Proxy 的 set

✅ 正确：监听响应式对象
const state = reactive({ count: 0 });
watchEffect(() => {
  console.log(state.count); // 会触发更新
});
state.count = 1; // 响应式对象的修改会触发更新

3. 异步操作中的数据访问0
const state = reactive({ userId: 1 });

❌ 可能不工作：如果 fetchUser 不依赖 state.userId
watchEffect(async () => {
  const userData = await fetchUser(state.userId); // 注意：这里读取了 state.userId
    ... 处理 userData
    因为在同步阶段读取了 state.userId，所以依赖能被正确收集
});

✅ 更安全的写法，明确依赖
watchEffect(() => {
  const id = state.userId; // 明确读取，确保依赖收集
fetchUser(id).then(userData => {
    p... 处理
});
});



4. 监听 ref 时没有访问 .value
const countRef = ref(0);

❌ 错误：没有读取 .value
watchEffect(() => {
  console.log(countRef); // 打印的是 ref 对象本身，不是它的值
});

✅ 正确：读取 .value
watchEffect(() => {
  console.log(countRef.value); // 读取 .value，建立依赖
});

5. 在 watchEffect 外部修改了响应式对象的引用
const state = ref({ count: 0 });
watchEffect(() => {
  console.log(state.value.count); // 依赖 state.value 和 state.value.count
});

❌ 问题：直接替换整个对象引用
state.value = { count: 1 }; // 这会触发更新（因为 state.value 被修改了）
但是，新的对象 { count: 1 } 是否是响应式的？如果是普通对象，则后续修改不会触发更新。

✅ 正确：修改对象内部属性，保持响应式
state.value.count = 1; // 这会触发更新，并且新值仍然是响应式的

或者，如果你要替换，确保新对象也是响应式的
state.value = reactive({ count: 1 }); // 或者直接用一个普通对象，Vue 会自动处理


-->